<template>
	<view class="wrap flex-direction-column" :style="{ minHeight: tools.clientTopHight(58) }">
		<view class="item flex-direction-column" v-for="(item, index) in props.list" :key="index"
			@click="tools.navTo('/pagesA/order/index?id=' + item.id)">
			<view class="top flex-space-between">
				<text>订单编号：{{ item.out_trade_no }}</text>
				<text :style="getOrderStyle(item)">{{ getshowState(item) }}</text>
			</view>
			<view class="middle flex">
				<image class="pic" mode="aspectFill" :src="item.cover"></image>
				<view class="info flex-direction-column">
					<view class="title flex">
						<!-- <image class="online" v-if="item.type == 2" src="/static/image/07.png"></image> -->
						<text class="one-line">{{ item.active_name }}</text>
					</view>
					<view class="flex-space-between" style="margin-top: 16rpx;">
						<view class="desc">{{ props.type == 1 ? item.group_name : item.province + '·' + item.city }}
						</view>
						<!-- <view class="desc">时间：{{ item.start_time }}</view> -->
						<view class="price"> {{ tools.isFree(item.total_price) }} </view>
					</view>
				</view>
			</view>
			<view class="bottom flex" v-if="item.show_state == 0">
				<view class="bottom_text">
					<!-- 8分68秒后关闭 -->
				</view>
				<view class="btn">去支付</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import tools from '@/utils/tools'
	import { PropType } from 'vue'
	import { Tlist } from '@/typings/list'
	import statusHooks from '@/hooks/status'
	const { getOrderText, getOrderStyle } = statusHooks()

	const props = defineProps({
		// 1 => 赛事 2 => 活动
		type: {
			type: Number,
			default() {
				return 1
			}
		},
		list: {
			type: Array as PropType<Tlist['item'][]>
		}
	})
	const getshowState=((item : any)=>{
		if(item.show_state == 0) return'待支付'
		if(item.show_state == 1) return'待参与'
		if(item.show_state == 2) return'已结束'
		if(item.show_state == 3) return'已退款'
	})
</script>

<style lang="scss" scoped>
	.wrap {
		// margin-top: 116rpx;
		padding: 0 20rpx;
	}

	.item {
		margin-top: 24rpx;
		padding: 22rpx 24rpx;
		background-color: #fff;
		border-radius: 20rpx;

		.top {
			padding-bottom: 18rpx;
			border-bottom: 1px solid #eee;

			text {
				height: 40rpx;
				font-size: 28rpx;
				line-height: 40rpx;

				&:nth-child(1) {
					color: #777777;
				}
			}
		}

		.middle {
			margin-top: 24rpx;

			.pic {
				width: 240rpx;
				height: 160rpx;
				border-radius: 6rpx;
			}

			.info {
				flex: 1;
				margin-left: 16rpx;

				.title {
					.online {
						width: 86rpx;
						height: 36rpx;
						margin-right: 6rpx;
					}

					text {
						width: 360rpx;
						height: 36rpx;
						font-size: 32rpx;
						line-height: 36rpx;
					}
				}

				.desc {
					height: 40rpx;
					color: #999999;
					font-size: 28rpx;
					margin-top: 6rpx;
					line-height: 40rpx;
				}

				.price {
					height: 44rpx;
					font-size: 32rpx;
					line-height: 44rpx;
					// color: #e6425e;
					font-weight: bold;
					margin-top: 8rpx;
				}
			}
		}

		.bottom {
			// justify-content: flex-end;
			justify-content: space-between;

			.bottom_text {
				width: 302rpx;
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #F24C55;
				opacity: 1;
			}

			.btn {
				color: #fff;
				width: 168rpx;
				height: 60rpx;
				font-size: 28rpx;
				margin-top: 8rpx;
				line-height: 60rpx;
				text-align: center;
				border-radius: 6rpx;
				background: #5062A7;
			}
		}
	}
</style>